<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{$websiteData['titles']}} - 首页</title>
    <meta name="description" content="{{$websiteData['description']}}" />
    <meta name="keywords" content="{{$websiteData['keywords']}}" />
    <link rel="stylesheet" href="/static/home/css/style.css">
</head>
<style>
    .carousel {
        position: relative;
        width: 100%;
        height: 500px;
        overflow: hidden;
        border-radius: 15px;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
        margin-bottom: 30px;
        margin-top: 30px;
    }

    .carousel-inner {
        display: flex;
        width: 400%;
        height: 100%;
        transition: transform 0.6s ease-in-out;
    }

    .carousel-item {
        width: 25%;
        height: 100%;
        position: relative;
    }

    .carousel-image {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .carousel-caption {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
        color: white;
        padding: 30px 20px 20px;
        text-align: center;
    }

    .carousel-caption h3 {
        font-size: 1.8rem;
        margin-bottom: 10px;
    }

    .carousel-caption p {
        font-size: 1.1rem;
        max-width: 600px;
        margin: 0 auto;
    }

    .carousel-control {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background: rgba(255, 255, 255, 0.2);
        color: white;
        border: none;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        font-size: 1.5rem;
        cursor: pointer;
        transition: all 0.3s ease;
        backdrop-filter: blur(10px);
    }

    .carousel-control:hover {
        background: rgba(255, 255, 255, 0.4);
    }

    .carousel-control.prev {
        left: 20px;
    }

    .carousel-control.next {
        right: 20px;
    }

    .carousel-indicators {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 10px;
    }

    .indicator {
        width: 15px;
        height: 15px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.5);
        cursor: pointer;
        transition: all 0.3s ease;
    }

    .indicator.active {
        background: white;
        transform: scale(1.2);
    }

    .carousel-autoplay {
        position: absolute;
        top: 20px;
        right: 20px;
        background: rgba(255, 255, 255, 0.2);
        color: white;
        border: none;
        padding: 8px 15px;
        border-radius: 20px;
        cursor: pointer;
        backdrop-filter: blur(10px);
        transition: all 0.3s ease;
    }

    .carousel-autoplay:hover {
        background: rgba(255, 255, 255, 0.4);
    }

    @media (max-width: 768px) {
        .carousel {
            height: 400px;
        }

        .carousel-caption h3 {
            font-size: 1.4rem;
        }

        .carousel-caption p {
            font-size: 0.9rem;
        }
    }

    @media (max-width: 576px) {
        .carousel {
            height: 300px;
        }

        .carousel-control {
            width: 40px;
            height: 40px;
            font-size: 1.2rem;
        }

        .carousel-caption {
            padding: 20px 15px 15px;
        }

        .carousel-caption h3 {
            font-size: 1.2rem;
        }

        .carousel-caption p {
            display: none;
        }
    }
</style>
<body>
@include('home.index.header')

<main class="container">
    <div class="carousel">
        <div class="carousel-inner">
            @foreach($carouselData as $vv)
                <div class="carousel-item">
                    <a href="#"><img src="{{$vv['thumbs']}}" alt="" class="carousel-image"></a>
{{--                    <div class="carousel-caption">--}}
{{--                        <h3>壮丽山脉</h3>--}}
{{--                        <p>雄伟的山脉与蓝天白云形成鲜明对比，展现大自然的鬼斧神工。</p>--}}
{{--                    </div>--}}
                </div>
            @endforeach
        </div>

        <button class="carousel-control prev">&#10094;</button>
        <button class="carousel-control next">&#10095;</button>

        <div class="carousel-indicators">
            @foreach($carouselData as $key=>$vv)
              <div class="indicator @if($key == 0) active @endif"></div>
            @endforeach
        </div>

    </div>

    <section class="featured-posts">
        <h3>精选文章</h3>
        <div class="posts-grid">
            @foreach($data as $key=>$val)
                <article class="post-card">
                    <img src="{{$val['thumb']}}" alt="文章图片">
                    <div class="post-content">
                        <h4><a href="{{route('home.article.info')}}?id={{$val['id']}}&indexActive=1">{{$val['title']}}</a></h4>
                        <p class="post-excerpt">{{$val['brief']}}</p>
                        <div class="post-meta">
                            <span class="post-date">{{$val['created_time']}}</span>
                            <span class="post-category"></span>
                        </div>
                    </div>
                </article>
            @endforeach

        </div>
    </section>

    <section class="about-me" style="margin-bottom: 50px;">
        <h3>关于我们</h3>
        <div class="about-container">
{{--            <img src="https://via.placeholder.com/150x150" alt="个人头像" class="profile-img">--}}
            <div class="about-content">
                <p>{{$websiteData['about_us']}}</p>
{{--                <a href="#contact" class="btn">了解更多</a>--}}
            </div>
        </div>
    </section>
</main>

@include('home.index.footer');
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const carouselInner = document.querySelector('.carousel-inner');
        const carouselItems = document.querySelectorAll('.carousel-item');
        const prevButton = document.querySelector('.carousel-control.prev');
        const nextButton = document.querySelector('.carousel-control.next');
        const indicators = document.querySelectorAll('.indicator');
        const autoplayButton = document.querySelector('.carousel-autoplay');

        let currentIndex = 0;
        let autoplayInterval;
        let isAutoplay = true;

        // 初始化轮播图
        function initCarousel() {
            updateCarousel();
            startAutoplay();

            // 添加事件监听器
            prevButton.addEventListener('click', showPrevSlide);
            nextButton.addEventListener('click', showNextSlide);

            autoplayButton.addEventListener('click', toggleAutoplay);

            indicators.forEach((indicator, index) => {
                indicator.addEventListener('click', () => {
                    showSlide(index);
                });
            });

            // 鼠标悬停时暂停自动播放
            document.querySelector('.carousel').addEventListener('mouseenter', () => {
                if (isAutoplay) {
                    stopAutoplay();
                }
            });

            // 鼠标离开时恢复自动播放
            document.querySelector('.carousel').addEventListener('mouseleave', () => {
                if (isAutoplay) {
                    startAutoplay();
                }
            });
        }

        // 更新轮播图显示
        function updateCarousel() {
            carouselInner.style.transform = `translateX(-${currentIndex * 25}%)`;

            // 更新指示器状态
            indicators.forEach((indicator, index) => {
                if (index === currentIndex) {
                    indicator.classList.add('active');
                } else {
                    indicator.classList.remove('active');
                }
            });
        }

        // 显示下一张幻灯片
        function showNextSlide() {
            currentIndex = (currentIndex + 1) % carouselItems.length;
            updateCarousel();
            resetAutoplay();
        }

        // 显示上一张幻灯片
        function showPrevSlide() {
            currentIndex = (currentIndex - 1 + carouselItems.length) % carouselItems.length;
            updateCarousel();
            resetAutoplay();
        }

        // 显示特定幻灯片
        function showSlide(index) {
            currentIndex = index;
            updateCarousel();
            resetAutoplay();
        }

        // 启动自动播放
        function startAutoplay() {
            if (isAutoplay) {
                autoplayInterval = setInterval(showNextSlide, 4000);
            }
        }

        // 停止自动播放
        function stopAutoplay() {
            clearInterval(autoplayInterval);
        }

        // 重置自动播放
        function resetAutoplay() {
            stopAutoplay();
            if (isAutoplay) {
                startAutoplay();
            }
        }

        // 切换自动播放状态
        function toggleAutoplay() {
            isAutoplay = !isAutoplay;

            if (isAutoplay) {
                startAutoplay();
                autoplayButton.textContent = '暂停播放';
            } else {
                stopAutoplay();
                autoplayButton.textContent = '开始播放';
            }
        }

        // 初始化轮播图
        initCarousel();
    });
</script>

</body>
</html>
